<template>
    <div class="topSearchIpt" @click="tosearch" >
        <i class="icon"></i>
        <span class="placeholder">搜索商品,共145867款好物</span>
    </div>
</template>
<script lang="ts" setup>
import { useRouter } from 'vue-router'
const router = useRouter()
const tosearch =()=>{
    router.push({
        name:"search",
    })
}
</script>

<style  lang="less" scoped>
.topSearchIpt{
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
    flex-grow: 1;
    height: 28px;
    line-height: 28px;
    font-size: 14px;
    background-color: rgb(237, 237, 237);
    border: 3px;
    .placeholder{
        color: #666;
    }
    .icon{
        display: inline-block;
        vertical-align: middle;
        width: 14px;
        height: 14px;
        margin-right: 10px;
        background: url('./icon.webp');
        background-size: 100% 100%;
    }
}

</style>